<template>
    <div>
        <div>
            <el-page-header @back="back" content="新建活码页面">
            </el-page-header>
        </div>

        <div class="interspaceH"></div>

        <el-steps :active="active" finish-status="success">
            <el-step title="基础信息"></el-step>
            <el-step title="设置欢迎语"></el-step>
            <el-step title="功能设置"></el-step>
        </el-steps>

        <div class="interspaceH"></div>

        <!--基础信息-->
        <div v-if="active==0">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="活码名称" prop="codeName">
                    <el-input v-model="ruleForm.codeName" style="width: 220px" placeholder="请输入活码名称"></el-input>
                </el-form-item>
                <el-form-item label="选择分组" prop="codeGroupId">
                    <el-select v-model="ruleForm.codeGroupId" clearable filterable placeholder="请选择分组">
                        <el-option
                                v-for="item in codeGroup"
                                :key="item.codeGroupId"
                                :label="item.codeGroupName"
                                :value="item.codeGroupId"/>
                    </el-select>
                </el-form-item>

                <!--客服人员开始-->
                <el-form-item label="客服人员" prop="member">
                    <el-radio label="1" v-model="ruleForm.member">全天在线</el-radio>
                    <el-radio label="2" v-model="ruleForm.member">自动上下线</el-radio>
                    <br/>
                    <el-button v-if="ruleForm.member == '1'" size="small" @click="adds">+ 添加成员</el-button>
                    <span v-if="ruleForm.member == '1'">同一个二维码可选择多位客服人员进行接待，客户扫码后随机分配一名客服人员</span>
                </el-form-item>
                <!--添加成员标签-->
                <el-form-item prop="empId">
                    <el-tag v-if="ruleForm.member == '1'" v-for="item in ruleForm.resource" :key="ruleForm.emp" closable
                            style="margin-right: 5px" @close="handleClose(item)">
                        {{ item.empName }}
                    </el-tag>
                </el-form-item>
                <!--选择成员列表-->
                <el-dialog :title="titles" :visible.sync="closeDialogs" width="26.5%" :close-on-click-modal="false">
                    <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArrs" :data="resource"
                                 @left-check-change="leftChanges" @right-check-change="rightChanges"></el-transfer>
                    <br/>
                    <el-row>
                        <el-col :span="7" :offset="17">
                            <el-button size="small" @click="quxiaos">取消</el-button>
                            <el-button size="small" type="primary" @click="peopless">提交</el-button>
                        </el-col>
                    </el-row>
                </el-dialog>
                <!--自动上下线-->
                <el-form-item v-if="ruleForm.member == '2'">
                    <el-form>
                        <!--卡片-->
                        <el-card class="box-card" style="width: 500px" v-for="(item,index) in ruleForm.card" :key="index">
                            <el-form-item label="员工选择" :prop="'card.' + index + '.empId'" :rules="{required: true, message: '请选择员工', trigger: 'blur'}">
                                <el-button type="small" @click="add(index)">+ 添加员工</el-button>
                                <br/>
                                <el-tag v-for="item in item.resource" :key="item.empId" closable
                                        style="margin-right: 5px" @close="handleClose(item)">
                                    {{ item.empName }}
                                </el-tag>
                            </el-form-item>
                            <div style="height: 10px"></div>
                            <el-form-item label="工作周期" :prop="'card.' + index + '.weekDay'">
                                <el-select v-model="item.weekDay" multiple placeholder="请选择工作周期" style="width: 250px">
                                    <el-option
                                            v-for="item1 in options"
                                            :key="item1.value"
                                            :label="item1.label"
                                            :value="item1.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <div style="height: 10px"></div>
                            <el-form-item label="开始时间" :prop="'card.'+ index + '.triggerTime'">
                                <el-time-select
                                        v-model="item.triggerTime"
                                        :picker-options="{
                                        start: '00:30',
                                        step: '00:30',
                                        end: '23:30'
                                      }"
                                        style="width: 250px"
                                        placeholder="开始时间">
                                </el-time-select>
                            </el-form-item>
                            <div style="height: 10px"></div>
                            <el-form-item label="结束时间" :prop="'card.'+ index + '.endTime'">
                                <el-time-select
                                        v-model="item.endTime"
                                        :picker-options="{
                                        start: '00:30',
                                        step: '00:30',
                                        end: '23:30',
                                        minTime: item.triggerTime
                                      }"
                                        style="width: 250px"
                                        placeholder="下线时间">
                                </el-time-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="index != 0" @click="deleteItem(item,index)" type="text">删除一条数据</el-button>
                            </el-form-item>
                        </el-card><br />
                    </el-form>
                    <!--卡片结束-->
                    <el-button @click="addCard" type="text">添加其他工作周期</el-button>
                </el-form-item>
                <!--客服人员结束-->

                <!--card员工添加-->
                <el-dialog :title="titles" :visible.sync="closeDialog" width="26.5%" :close-on-click-modal="false">
                    <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArr" :data="resource"
                                 @left-check-change="leftChange" @right-check-change="rightChange"></el-transfer>
                    <br/>
                    <el-row>
                        <el-col :span="7" :offset="17">
                            <el-button size="small" @click="quxiao">取消</el-button>
                            <el-button size="small" type="primary" @click="peoples">提交</el-button>
                        </el-col>
                    </el-row>
                </el-dialog>


                <el-form-item label="企业备用成员" prop="spare">
                    <el-button size="small" @click="add1">+ 添加企业成员</el-button>
                    <span>当添加企业成员均不可接待的时候，由备用成员添加好友关系</span><br/>
                    <!--企业备用成员-->
                    <el-tag v-for="item in ruleForm.information" :key="item.empId" closable style="margin-right: 5px"
                            @close="handleClose1(item)">
                        {{ item.empName }}
                    </el-tag>
                </el-form-item>
                <!--备用成员列表-->
                <el-dialog title="添加备用成员" :visible.sync="repeat" width="26.5%" :close-on-click-modal="false">
                    <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="informationArr"
                                 :data="information"
                                 @left-check-change="leftChange1" @right-check-change="rightChange1"></el-transfer>
                    <br/>
                    <el-row>
                        <el-col :span="7" :offset="17">
                            <el-button size="small" @click="quxiao1">取消</el-button>
                            <el-button size="small" type="primary" @click="peoples1">提交</el-button>
                        </el-col>
                    </el-row>
                </el-dialog>
                <!--备用成员结束-->

                <el-form-item label="添加标签">
                    <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                              ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                              @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
                    <br/>
                    <div style="width: 50%">
                        <el-tag :key="tag" v-for="tag in ruleForm.biaoqian" closable :disable-transitions="false"
                                @close="handleClose2(tag)">
                            {{ tag }}
                        </el-tag>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-top: 12px;" @click="back">返回列表</el-button>
                    <el-button style="margin-top: 12px;" type="primary" @click="next" v-if="active!=2">下一步</el-button>
                </el-form-item>
            </el-form>

        </div>
        <!--设置欢迎语-->
        <div v-if="active==1">
            <el-row>
                <el-col :span="12">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                        <div class="m-alert">
                            <span class="el-icon-info"></span>
                            <div>
                                <div style="font-size: 20px">请注意</div>
                                <div>1、在渠道码处设置的欢迎语会被优先推送，如果成员在渠道码处设置了欢迎语，在此设置的欢迎语不会生效</div>
                                <div>2、一个成员如果被设置了多个欢迎语，将会使用最新设置或修改的欢迎语</div>
                            </div>
                        </div>
                        <el-divider content-position="left">发送欢迎语</el-divider>
                        <div style="width: 400px;height: 220px">
                            <!--                            <el-form-item prop="codeWelcome">-->
                            <MaterialContentText ref="materialContentText1" v-model="ruleForm.codeWelcome" :disabledAdd="true" :contentType="[1]"/>
                            <!--                            </el-form-item>-->

                        </div>

                        <el-divider content-position="left"><!--开关按钮-->
                            分段式欢迎语
                            <el-switch v-model="ruleForm.fdshyy" active-color="#13ce66"
                                       inactive-color="#ff4949"></el-switch>
                        </el-divider>
                        <div v-if="ruleForm.fdshyy == true">
                            <div class="m-alert">
                                <span class="el-icon-info"></span>
                                <div>
                                    <div>1、员工上下班不同时间段可设置不同欢迎语；</div>
                                    <div>2、分段之外的时间将发送欢迎语。</div>
                                </div>
                            </div>
                            <div class="interspaceH"></div>
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true" label-width="130px" class="demo-form-inline" >
                                <el-card class="box-card" style="width: 100%;height: 100%" v-for="(item,index) in ruleForm.welcome" :key="index">
                                    <el-form-item label="时段:发送时间:" :prop="'welcome.' + index + '.weekDayTime'" :rules="{required: true, message: '请选时间段', trigger: 'blur'}">
                                        <el-select v-model="item.weekDayTime" multiple placeholder="请选择工作周期"
                                                   size="small"
                                                   style="width: 230px">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :prop="'welcome.' + index + '.triggerTime'">
                                        <el-time-select
                                                style="width: 150px;height: 40px"
                                                size="small"
                                                placeholder="开始时间"
                                                v-model="item.triggerTime"
                                                :picker-options="{
                                                  start: '00:30',
                                                  step: '00:30',
                                                  end: '23:30'
                                                }">
                                        </el-time-select>
                                    </el-form-item>
                                    <span style="border-top: 50px">至</span>
                                    <el-form-item :prop="'welcome.' + index + '.endTime'">
                                        <el-time-select
                                                style="width: 150px;height: 40px"
                                                placeholder="结束时间"
                                                size="small"
                                                v-model="item.endTime"
                                                :picker-options="{
                                                  start: '00:30',
                                                  step: '00:30',
                                                  end: '23:30',
                                                  minTime: item.triggerTime
                                                }">
                                        </el-time-select>
                                    </el-form-item>
                                    <div style="height: 230px;width: 380px">
                                        <MaterialContentText ref="materialContentText6" :disabledAdd="true" v-model="item.branch"
                                                             :contentType="[1]"/>
                                    </div>
                                    <el-button v-if="index != 0" @click="deleteItemw(item,index)" type="text">删除一条数据</el-button>
                                </el-card>
                            </el-form>
                            <el-button type="text" @click="fenduan">+添加分时段欢迎语</el-button>
                            <div class="m-alert">
                                <span class="el-icon-info"></span>
                                <div>
                                    <div>1、新建欢迎语最多可发送1条文字消息和9个附件。</div>
                                    <div>2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息。</div>
                                    <div>3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功。</div>
                                </div>
                            </div>
                        </div>
                        <el-form-item>
                            <el-button style="margin-top: 12px;" @click="on1">上一步</el-button>
                            <el-button style="margin-top: 12px;" type="primary" @click="next1" v-if="active!=2">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <iframe src="http://wx.zzxapps.com/pages/preview/show/code" frameborder="0"
                            style="width: 300px;height: 560px;"></iframe>
                </el-col>
            </el-row>
        </div>
        <!--功能设置-->
        <div v-if="active==2">
            <el-form ref="ruleForm" :model="ruleForm" label-width="110px">
                <el-form-item label="自动通过好友：">
                    <el-switch v-model="ruleForm.addFriends"></el-switch>
                </el-form-item>
                <el-form-item label="开启时间" prop="time" v-if="ruleForm.addFriends == true">
                    <el-radio label="1" v-model="ruleForm.time">全天开启</el-radio>
                    <el-radio label="2" v-model="ruleForm.time">选择时间段</el-radio>
                    <el-card v-if="ruleForm.time == '2'" style="width: 35%">
                        <el-time-select
                                v-model="ruleForm.addStartTime"
                                :picker-options="{
                                start: '00:00',
                                step: '00:30',
                                end: '23:30'
                              }"
                                placeholder="请输入时间点">
                        </el-time-select> 至
                        <el-time-select
                                v-model="ruleForm.addEndTime"
                                :picker-options="{
                                start: '00:00',
                                step: '00:30',
                                end: '23:30'
                              }"
                                placeholder="请输入时间点">
                        </el-time-select>
                    </el-card>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-top: 12px;" @click="on2">上一步</el-button>
                    <el-button style="margin-top: 12px;" @click="next2" type="primary">创建活码</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import MaterialContentText from "@/components/material_content_text/material_content_text"

export default {
    components: {
        MaterialContentText
    },
    data() {
        return {
            //分组下拉框
            codeGroup: [],
            //全天在线
            closeDialogs:false,
            //card选择成员
            closeDialog: false,
            resourceArrs: [],
            resource: [],
            resourceArr: [],
            //备用成员
            repeat: false,
            information: [],
            informationArr: [],
            emp: [],

            addFriends: '',//自动添加好友""
            branch: [],
            //表单
            ruleForm: {
                codeName: '',
                codeGroupId: '',
                member: '1',//全天在线、自动上下线
                resource: [],//客服人员信息
                weekDay: [],//工作周期
                triggerTime: '',//上线时间
                endTime: '',//下线时间
                information: [],//备用成员信息
                empId: [],//客服人员id
                spare: [],//备用成员id
                biaoqian: [],//标签
                addFriends: true,
                codeWelcome: [],

                fdshyy: false,


                time: "1",
                addStartTime: '',
                addEndTime: '',
                card: [
                    {
                        empId: '',
                        weekDay: '',
                        triggerTime: '',
                        endTime: ''
                    }
                ],
                welcome: [{//分段式欢迎语
                    weekDayTime: [],//周期
                    triggerTime: '',//开始时间
                    endTime: '',//结束时间
                    branch:[],//分段式欢迎语内容
                }],
                branch: [],//分段式欢迎语外部内容

            },


            //添加成员页面
            titles: '添加成员',
            options: [{
                value: '7',
                label: '周一'
            }, {
                value: '1',
                label: '周二'
            }, {
                value: '2',
                label: '周三'
            }, {
                value: '3',
                label: '周四'
            }, {
                value: '4',
                label: '周五'
            }, {
                value: '5',
                label: '周六'
            }, {
                value: '6',
                label: '周日'
            }],
            values: [],

            //进度条
            active: 0,
            inputVisible: false,
            inputValue: '',
            cardIndex: 0,
            //表单验证
            rules: {
                codeName: [
                    {required: true, message: '请输入活码名称', trigger: 'blur'},
                    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                codeGroupId: [
                    { required: true, message: '请选择活码分组', trigger: 'change' }
                ],
                member: [
                    {required: 'array', message: '请选择客服人员', trigger: 'change'}
                ],
                spare: [
                    { required: true, message: '请选择备用成员', trigger: 'change' }
                ]
            }
        };
    },
    mounted() {
        let that = this
        this.$request("/api/codeGroup/selectCodeGroup/1_0", '', "POST").then((data) => {
            that.codeGroup = data.rows
        })
        this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
            that.resource = data.rows
            that.resource.forEach((item, i) => {
                that.resource[i].key = that.resource[i].empId;
                that.resource[i].label = that.resource[i].empName;
                that.resource[i].disabled = false
            })
        })
        this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
            that.information = data.rows
            that.information.forEach((item, i) => {
                that.information[i].key = that.information[i].empId;
                that.information[i].label = that.information[i].empName;
                that.information[i].disabled = false
            })
        })
    },
    methods: {
        adds() {
            this.closeDialogs = true
        },
        //打开员工列表
        add(index) {
            this.cardIndex = index
            this.resourceArr = [...index]
            this.closeDialog = true
        },
        add1() {
            this.repeat = true
        },
//card全天在线
        leftChanges(e) {
            let value = this.resourceArrs
            let a = value.concat(e);
            this.resourceArrs = a
        },
        rightChanges(e) {
            let value = []
            this.resourceArrs.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.resourceArrs = value;
        },
        //提交
        peopless() {
            let arr = this.resourceArrs
            let information = this.resource
            let result = []
            let resultId = []
            arr.map((value, index, array) => {
                information.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                        resultId.push(value)
                    }
                })
            })
            this.ruleForm.resource = result
            this.ruleForm.empId = resultId
            this.quxiaos()
        },
        //取消
        quxiaos() {
            this.closeDialogs = false
        },

//客服人员
        leftChange(e) {
            let value = this.resourceArr
            let a = value.concat(e);

            this.resourceArr = a
        },
        rightChange(e) {
            let value = []
            this.resourceArr.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.resourceArr = value;
        },
        //提交
        peoples() {
            let arr = this.resourceArr
            let resource = this.resource
            let result = []
            let resultId = []
            arr.map((value, index, array) => {
                resource.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                        resultId.push(value)
                    }
                })
            })
            this.ruleForm.card[this.cardIndex].resource = result
            this.ruleForm.card[this.cardIndex].empId = resultId
            this.quxiao()
        },
        //取消
        quxiao() {
            this.closeDialog = false
        },
//备用成员
        leftChange1(e) {
            let value = this.informationArr
            let a = value.concat(e);
            this.informationArr = a
        },
        rightChange1(e) {
            let value = []
            this.informationArr.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.informationArr = value;
        },
        //提交
        peoples1() {
            let arr = this.informationArr
            let information = this.information
            let result = []
            let resultId = []
            arr.map((value, index, array) => {
                information.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                        resultId.push(value)
                    }
                })
            })
            this.ruleForm.information = result
            this.ruleForm.spare = resultId
            this.quxiao1()
        },
        //取消
        quxiao1() {
            this.repeat = false
        },


        //添加分段式欢迎语
        addCard() {
            this.ruleForm.card.push({
                empId: '',
                weekDay: '',
            })
        },
        deleteItem(item,index) {
            this.ruleForm.card.splice(index,1);
            console.log(this.ruleForm.card,"删除");
        },
        //分段式欢迎语打开
        fenduan() {
            this.ruleForm.welcome.push({//分段式欢迎语
                weekDayTime: [],//周期
                triggerTime: '',//开始时间
                endTime: '',//结束时间
                branch: [],//分段式欢迎语内容
            })
        },
        //删除分段式欢迎语
        deleteItemw(item,index) {
            this.ruleForm.welcome.splice(index,1);
            console.log(this.ruleForm.welcome,"删除")
        },


        //下一步
        next() {
            if (this.active++ > 2) this.active = 0;
        },
        next1() {
            if (this.active++ > 2) this.active = 0;
            if (this.$refs.materialContentText1.getData().length > 0){
                this.ruleForm.codeWelcome = this.$refs.materialContentText1.getData()
            }
            this.ruleForm.welcome.forEach((item, i) => {
                let week = item.weekDayTime.join(",")
                item.triggerTime = item.triggerTime+":00"
                item.endTime = item.endTime+":00"
                item.weekDayTime = week
                this.ruleForm.branch[i] = this.$refs.materialContentText6[i].getData()
                let branch = this.ruleForm.branch[i]
                item.branch = branch[0].content
            })
        },
        next2() {
            console.log(this.ruleForm)
            debugger
            //标签
            let biaoqian = this.ruleForm.biaoqian.join(",")
            this.ruleForm.biaoqian = biaoqian
            //周期
            /*let cycle = this.ruleForm.cycle.join(",")
            this.ruleForm.cycle = cycle*/

            /*let empId = this.ruleForm.empId.join(",")
            this.ruleForm.resource = empId*/

            if (this.ruleForm.member == "1"){
                let empId = this.ruleForm.empId.join(",")
                this.ruleForm.empId = empId
            }else if (this.ruleForm.member == "2"){
                this.ruleForm.empId = ""
                this.ruleForm.card.forEach((item, i) => {
                    let emp = item.empId.join(",")
                    let week = item.weekDay.join(",")
                    item.triggerTime = item.triggerTime+":00"
                    item.endTime = item.endTime+":00"
                    item.emp = emp
                    item.week = week
                })
            }

            /*if (this.ruleForm.fdshyy == false){
                this.ruleForm.welcome = []
            }else if (this.ruleForm.fdshyy == true) {
                this.ruleForm.welcome.forEach((item, i) => {
                    let week = item.weekDay.join(",")
                    item.triggerTime = item.triggerTime+":00"
                    item.endTime = item.endTime+":00"
                    item.emp = emp
                    item.week = week
                })
            }*/


            //备用成员
            let spare = this.ruleForm.spare.join(",")
            this.ruleForm.spare = spare

            //自动添加好友
            if (this.ruleForm.addFriends == true) {
                this.addFriends = "true"
            }else {
                this.addFriends = 'false'
            }
            var code = {
                card: this.ruleForm.card,
                codeName: this.ruleForm.codeName,
                codeGroupId: this.ruleForm.codeGroupId,
                tags: this.ruleForm.biaoqian,
                addFriends: this.addFriends,
                empId: this.ruleForm.empId,
                spare: this.ruleForm.spare,
                weekDay: this.ruleForm.weekDay,
                //triggerTime: this.ruleForm.triggerTime,
                //endTime: this.ruleForm.endTime,
                triggerType: '1',
                addStartTime: this.ruleForm.addStartTime,
                addEndTime: this.ruleForm.addEndTime,
                codeWelcome: this.ruleForm.codeWelcome[0].content,
                ffshyy: this.ruleForm.fdshyy,
                welcome: this.ruleForm.welcome
            };
            debugger
            this.$request("/api/code/addEmpCode/1_0", code , "POST").then((data) => {
                this.$emit("currentHandler", "list")
                this.$message({
                    message: '创建活码成功',
                    type: 'success'
                });
            })
        },
        on1() {
            this.active = 0
        },
        on2() {
            this.active = 1
        },
        back() {
            this.$emit("currentHandler", "list")
        },
        //表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    this.$message({
                        message: 'error submit!!',
                        type: 'success'
                    });

                    return false;
                }
            });
        },
        /*上传标签*/
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //员工
        handleClose(item) {
            this.ruleForm.resource.splice(this.ruleForm.resource.indexOf(item), 1);
        },
        //备用成员
        handleClose1(item) {
            this.ruleForm.information.splice(this.ruleForm.information.indexOf(item), 1);
        },
        //标签
        handleClose2(tag) {
            this.ruleForm.biaoqian.splice(this.ruleForm.biaoqian.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.ruleForm.biaoqian.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },



    }
}
</script>

<style>
.el-transfer__button {
    display: none;
}

.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
